function setSize() {
  let htmlWidth = document.querySelector('html').clientWidth
  if (htmlWidth > 1920) htmlWidth = 1920
  if (htmlWidth < 1024) htmlWidth = 1024
  let fz = htmlWidth / 80 + 'px'
  document.querySelector('html').style.fontSize = fz
}
setSize()

window.onresize = function () {
  setSize()
}
// -------------------------------
let data = []
let names = []
let pingfens = []
let xinzis = []
// 记录 
let ind = 1
function render() {
  $.each(data, function (index, item) {
    // console.log(item);
    // 拿到数据 规划三组
    names.unshift(item.username)
    pingfens.unshift(item.score)
    xinzis.unshift(item.salary)
       
      //  console.log(index);
  })
  ; (function () {
    $('table tbody').append(`<tr>
      <td>${names[0]}</td>
      <td>${pingfens[0]}</td>
      <td>${xinzis[0]}</td>
      </tr>`)
  })()
  
 
  //删除重复数据
  names.splice(ind)
  pingfens.splice(ind)
  xinzis.splice(ind)
  ind++
  // console.log(names);
  // console.log(pingfens);
  // console.log(xinzis);
  // console.log(ind);
}




// ------------点击--

$('.biaoge button').on('click', function () {
 if (!$(this).siblings('.name').val()) return
 if (!$(this).siblings('.xinzi').val()) return
 if (!$(this).siblings('.pingfen').val()) return

//



  let a = $(this).siblings('.name').val()
  let b = $(this).siblings('.pingfen').val()
  let c = $(this).siblings('.xinzi').val()
  // 点击获得 input 的val 然后追加对象到 数组 data中 清空val
  $(this).siblings('input').val('')


  data.push({
    username: a, score: b, salary: c
  })
  render()
  line()
  bar()
})

// ----------------图表区域------------------------


function line() {
  let myChart = echarts.init($('.boxpf')[0])
let option = {
  xAxis: {
    type: 'category',
    data: names,
    axisLine: {
      lineStyle: {
        color: '#2d7cd5'
      }
    }
  },
  yAxis: {
    type: 'value',
    splitLine: show = false,
    axisLine: {

      show: true,
      lineStyle: {
        color: '#2d7cd5'
      }
    },
    axisTick: {
      show: true
    }

  },
  series: [{
    data: pingfens,
    type: 'line',

  }]
};


myChart.setOption(option)

}


//柱状图
function bar () {

  let myChart = echarts.init($('.boxxz')[0])

  option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
  
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: names
    },
    series: [
        {
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
          
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
        
        },
        {
            name: '联盟广告',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
           
        },
        {
            name: '视频广告',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
        
        },
        {
            name: '搜索引擎',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: xinzis
        }
    ]
};

myChart.setOption(option)
}